<template>
    <div class="wrapper-point">
        <van-nav-bar
            :title="this.title"
            left-text=""
            left-arrow
             show-action
            @click-left="$router.go(-1)"
            />
        <div v-if="show">
            <van-search
              v-model="value"
              show-action
              placeholder="请输入搜索关键词"
            >
              <template #action>
                <div @click="onSearch">搜索</div>
              </template>
            </van-search>
          <div class="base">
              <van-sidebar v-model="activeKey">
                  <van-sidebar-item :title="item.name"  v-for="(item,index) in list" :key="index" @click="aaa(item.id)"/>
              </van-sidebar>
              <div class="right">
                  <div class="rights" v-for="(content,index) in cont" :key="index">
                      <p>{{content.name}}</p> 

                      <div class="chlid">
                          <span v-for="(child,index) in content.bank" :key="index" @click="select(child.name)">{{child.name}}</span>
                      </div>
                  </div>
              </div>
            </div>
        </div>
        <div class="select" v-if="!show">
          <p @click="out"><van-icon name="coupon-o" />题库选择</p>
        </div>
    </div>
</template>

<script>
import { selectList, quesBank } from "../request/http";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      list: [],
      cont: [],
      show:true,
      title:'题库选择'

    };
  },
  mounted() {
    selectList().then(res => {
      console.log(res);
      this.list = res.data.data;
      console.log(this.list);
    });
  },
  methods: {
    aaa(id) {
      console.log(id);
      quesBank(id).then(res => {
        console.log(res);
        this.cont = res.data.data;
      });
    },
    select(val){
      this.show=!this.show;
      this.title=val;
    },
    out(){
      this.show=!this.show;
      this.title="题库选择"
    },
    onSearch(){
      this.$router.push({
        name:'Currsearch',
        params:{value:this.value}
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-point {
  width: 100%;
  .select{
    width: 100%;
    margin-top: .4rem;
    p{
      font-size: .5rem;
      background: #fff;
      z-index: 999;
    }
  }
  .base {
    width: 100%;
    height:18.97rem;
    display: flex;
    .right {
      flex: 1;
      overflow-x:hidden;

      .rights {
        p {
          width: 100%;
          padding: 0.2rem;
        }
        .chlid{
            width: 100%;
            box-sizing: border-box;
            padding-left: 1rem;
            
              
            
            span{
                
                display: inline-block;
                box-sizing: border-box;
                padding: .1rem;
                background: #fff;
                margin: .2rem;
                width: 40%;
                text-align: center;
                
            }
            // :active{
            //     background: rgb(252, 229, 194);
            //     color: orange;
            //   }
            
        }
      }
    }
  }
}
</style>